<template>
<div>
  <CityHeader></CityHeader>
  <CitySearch :cities="cities"></CitySearch>
  <CityList :hotcity="hotcity" :cities="cities" :letter="letter"></CityList>
  <CityAlphabet :cities="cities" @change="handleLetterClick"></CityAlphabet>
</div>
</template>

<script>
import axios from 'axios'
import CityHeader from './components/Header.vue'
import CitySearch from './components/Search.vue'
import CityList from './components/List.vue'
import CityAlphabet from './components/Alphabet.vue'
export default {
    name:'CITY',
    data(){
    return{
      cities:{},
      hotcity:[],
      letter:''
    }
    },
    components:{CityHeader,CitySearch,CityList,CityAlphabet},
    methods:{
      getCityInfo(){
        axios.get('/api/city.json')
          .then(this.handleGetCityInfoSucc)
      },
      handleGetCityInfoSucc(res){
        
        if(res.status ==200){
          this.hotcity = res.data.data.hotCities
          this.cities = res.data.data.cities
        }
      },
      handleLetterClick(letter){
        this.letter = letter
      }
    },
    mounted(){
      this.getCityInfo()
    }
}
</script>

<style lang="stylus" scoped>

</style>